{% extends 'layout.html' %}
{% block content %}
    <style>
        .cart-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .cart-item {
            display: flex;
            border-bottom: 1px solid #ddd;
            padding: 15px 0;
            align-items: center;
        }
        .product-image {
            width: 100px;
            height: 100px;
            object-fit: cover;
            margin-right: 20px;
        }
        .product-info {
            flex-grow: 1;
        }
        .quantity-controls {
            display: flex;
            align-items: center;
        }
        .quantity-input {
            width: 50px;
            text-align: center;
            margin: 0 10px;
        }
        .total-price {
            font-weight: bold;
            margin-top: 20px;
            text-align: right;
        }
    </style>
</head>
<body>
    <div class="cart-container">
        <h1>Your Shopping Cart</h1>
        
        {% for item in cart_products %}
        <div class="cart-item">
            <img src="{{ item.product.goods_img.url }}" alt="{{ item.product.goods_name }}" class="product-image">
            <div class="product-info">
                <h3>{{ item.product.goods_name }}</h3>
                <p>{{ item.product.goods_desc }}</p>
                <p>Price: ${{ item.product.goods_price }}</p>
            </div>
            <div class="quantity-controls">
                <button>-</button>
                <input type="number" value="{{ item.quantity }}" min="1" class="quantity-input">
                <button>+</button>
            </div>
        </div>
        {% endfor %}
        
        <div class="total-price">
            Total: ${{ total_price }}
        </div>
    </div>
{% endblock %}